<template>
	<view>
		<dev-navbar title="体检报告"></dev-navbar>
		<view class="overall-data">
			<!-- 每一份报告 -->
			<view @longpress="logoTime(item)" @tap.stop="jumpDetails(item)" class="each-report"
				v-for="(item,index) in list" :key="index">
				<dev-list-layout leftMove="0" leftFontWight="500" modify-color-right="#029D95" :show-split-lines="false"
					height="42" :leftText="item.phyInstitution" leftColor="#029D95" rightTextColor="#029D95"
					:rightText="item.createTime" backgroundColor="none" imageHeightRight="30" imageWidthRight="30"
					rightTextWidth="280">
				</dev-list-layout>
				<view class="total-pictures" v-if="item.fileType==1">
					共{{item.reportUrl | imageNum}}张图片>
				</view>
			</view>

			<!-- 上传报告 -->
			<view class="upload-report-box" @tap.stop="jumpToUploadReport()">
				<view class="upload-report">
					<dev-svg-image mode="image" imageUrl="shoppingMall/31201DBA55484CF19B4B09D5118B0093.png" width="44"
						height="44">
					</dev-svg-image>
					<text class="upload-text">上传报告</text>
				</view>
			</view>

		</view>


		<view style="height: 50rpx;"></view>
		<dev-iphone-bottom></dev-iphone-bottom>

	</view>
</template>

<script>
	import devListLayout from '@/pagesMy/components/dev-list-layout/dev-list-layout.vue'
	export default {
		components: {
			devListLayout
		},
		data() {
			return {
				list: [], //报告数据
				pageCurrent: 1,
				pageSize: 10,
				totalPages: '', //总页数
			};
		},
		onReachBottom() {
			if (this.pageCurrent < this.totalPages) {
				this.pageCurrent++;
				this.userPhysicalReport();
			}
		},
		filters: {
			imageNum: function(value) {
				// console.log(value.split(','))
				return value.split(',').length
			}
		},
		onLoad() {
			this.userPhysicalReport(); //获取体检报告
		},
		methods: {
			//监听用户长按
			logoTime(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: `您是否要删除《${item.phyInstitution}》这份报告吗？`,
					success: function(res) {
						if (res.confirm) {
							//删除报告
							_this.$https.delete(global.apiUrls.deleteReport(item.userPhyRepId)).then(res => {
								if (res.data.code === 1000) {
									_this.userPhysicalReport(1);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//跳转到上传报告
			jumpToUploadReport() {
				console.log('点击率')
				this.$urouter.navigateTo({
					url: '/pagesMy/health-records/upload-report',
					params: {}
				});
			},
			//获取体检报告
			userPhysicalReport(e) {
				if(e){
					this.list = [];
					this.pageCurrent = 1;
				}
				this.$https.get(global.apiUrls.userPhysicalReport, {
					pageCurrent: this.pageCurrent,
					pageSize: this.pageSize,
					userId: global.userInfo.userId
				}).then(res => {
					if (res.data.code === 1000) {
						this.list = [...this.list, ...res.data.result.records]
						this.totalPages = res.data.result.pages;
					}
				})
			},
			//跳转到详情界面
			jumpDetails(item) {
				if (item.fileType == 1) {
					this.$urouter.navigateTo({
						url: '/pagesMy/health-records/report-details',
						params: {
							url: item.reportUrl
						}
					});
				} else {
					wx.showLoading({
						title: 'pdf预览准备中',
					})
					//这一步是下载PDF
					wx.downloadFile({
						url: item.reportUrl,
						success(res) {
							console.log(res)
							const filePath = res.tempFilePath
							setTimeout(function() {
								//这一步是打开PDF
								wx.openDocument({
									fileType: "pdf",
									filePath: filePath,
									showMenu: true,
									success: function(res) {
										console.log(res)
										wx.hideLoading({
											success: function() {
												console.log('关闭');
											}
										})

									}
								})
							}, 300)
						},
						fail: function(e) {
							console.log(e, '网络错误');
						}
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	.overall-data {
		padding: 1rpx 24rpx;

		.each-report {
			padding: 22rpx 24rpx;
			margin-top: 30rpx;
			width: 702rpx;
			height: 134rpx;
			background-image: url('http://static.bsyjk.cn/shoppingMall/68F986B4FC4A41E0B9B991BF65A8F47D.png');
			background-size: 100% 100%;

			.total-pictures {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #029D95;
			}
		}

		.upload-report-box {
			width: 702rpx;
			background-color: #fff;
			padding: 57rpx 46rpx;
			margin-top: 30rpx;
			border-radius: 16rpx;

			.upload-report {
				width: 610rpx;
				height: 130rpx;
				border-radius: 10rpx;
				border: 1rpx dashed #979797;
				display: flex;
				align-items: center;
				justify-content: center;

				.upload-text {
					margin-left: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #4A4A4A;
				}
			}
		}


	}
</style>
